<?php get_instance()->view('common/header');?>
<style>
    .upimg-div .heightnone{height:auto;}
	video::-webkit-media-controls {
  display:none !important;
}
</style>
<body class="bag1">
<div class="content">
    <form action="<?php echo getUrl('friendsCircle/save')?>" id="save-form" method="post" enctype="multipart/form-data">
        <textarea class="weui-textarea p3p f09" placeholder="这一刻的想法" rows="5" name="content"></textarea>
        <div class="weui-cells weui-cells_form mt0 imgfilebox">
            <div class="weui-cell P0">
                <div class="weui-cell__bd">
                    <div class="weui-uploader">
                        <div class="weui-uploader__hd">
                            <p class="weui-uploader__title f08 cor9">您最多可以上传6张图片</p>
                            <div class="weui-uploader__info f08"><span class="f10 weui-uploader_number">
        <!--                                    --><?php //echo !$add && !empty($info['pic']) ? count($info['pic']) : 0?>
                                    0
                                        </span>/6</div>
                        </div>
                        <div class="weui-uploader__bd">
                            <ul class="weui-uploader__files" id="uploaderFiles">
        <!--                        --><?php //if (!$add && !empty($info['pic'])): foreach ($info['pic'] as $k => $v):?>
        <!--                            <li class="weui-uploader__file" style="background-image:url(--><?php //echo $v?><!--)">
        /*                                <input type="hidden" name="img[]" value="*/<?php //echo $v?><!--">-->
        <!--                            </li>-->
        <!--                        --><?php //endforeach; endif;?>
                            </ul>
                            <div class="weui-uploader__input-box jdjz">
                                <img src="<?php echo $this->staticUrl?>img/png/pic104.png">
                                <input id="uploaderInput" class="weui-uploader__input chooseImage" type="file" accept="image/*" multiple/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <script type="text/javascript">
                $(function () {
                    <?php $number = !$add && !empty($info['pic']) ? 4 - count($info['pic']) : 6?>
                    weUiImg({
                        name:'images[]',
                        imagesNumber:6,
                        changeImagesNumber:<?php echo $number?>

                    });
                })
            </script>
        </div>
        <div style="overflow: hidden;padding: 10px 15px;" class="mb10 videobox">
            <div class="img-box full">
                <section class=" img-section">
                    <div class="z_video upimg-div henglineleft">
                        <section class="z_file fl jdjz">
                            <img src="<?php echo $this->staticUrl?>img/png/pic105.png">
                            <input type="file" name="file" id="file" class="file video" value="" accept="video/*">
                        </section>
                    </div>
                </section>
            </div>
            <aside class="mask works-mask">
                <div class="mask-content">
                    <p class="del-p ">您确定要删除视频吗？</p>
                    <p class="check-p"><span class="del-com wsdel-ok">确定</span><span class="wsdel-no">取消</span></p>
                </div>
            </aside>
        </div>
        <div class="weui-cells">
            <div class="weui-cell weui-cell_access we_ui_address">
                <div class="weui-cell__bd">
                    <span class="hengleft vCenter f08">
                        <img class="mr10 heightimg" src="<?php echo $this->staticUrl?>img/png/pic36.png" alt="">
                        <span class="address"><?php echo !$add ? $info['address_name'] : '所在位置'?></span>
                    </span>
                    <input type="hidden" value="<?php echo !$add ? $info['address_name'] : ''?>" name="address">
                    <input type="hidden" value="<?php echo !$add ? $info['latitude'] : ''?>" name="latitude">
                    <input type="hidden" value="<?php echo !$add ? $info['longitude'] : ''?>" name="longitude">
                </div>
                <div class="weui-cell__ft"></div>
            </div>
            <script type="text/javascript">
                $(function () {
                    // 显示地图
                    $(".we_ui_address").click(function () {
                        $(".map_div").show();
                        $(".content").hide();
                    });
                })
            </script>
        </div>
        <div class="bag3">
                <p class="f09 bag3 p3p">发布须知</p>
            </div>
            <div class="p3 pt5">
                <p class="f08 cor9">1、照片数量不可超过6张</p>
    <!--            <p class="f08 cor9">2、视频不得超过15秒时间</p>-->
            </div>
        <div class="shopcarbox bag1">
            <button class="dk p5_0 bag2 wp100 cor1 tc">立即发布</button>
        </div>
    </form>
    <script type="text/javascript">
        $(function () {
            $.e_validate.init('#save-form',{saveMessage:'保存中...'});
        })
    </script>
</div>
<?php get_instance()->view('common/map');?>
</body>

<script src="<?php echo $this->staticUrl?>js/base.js"></script>
<script>
    $(function () {
        var delParent;
        var defaults = {
            fileType         : ["mp4","webm","ogg",'mov'],   // 上传文件的类型
            fileSize         : 1024 * 1024 * 100,                  // 上传文件的大小 10M
            numUp : 1
        };
        $(".video").change(function(){
            $(".imgfilebox").hide();
            var idFile = $(this).attr("id");
            var file = document.getElementById(idFile);
            var imgContainer = $(this).parents(".z_video"); //存放图片的父亲元素
            var fileList = file.files; //获取的图片文件
            var input = $(this).parent();//文本框的父亲元素
            var imgArr = [];
            //遍历得到的图片文件
            var numUp = imgContainer.find(".up-section").length;
            var totalNum = numUp + fileList.length;  //总的数量
            if(fileList.length > defaults.numUp || totalNum > defaults.numUp){
                alert("上传图片数目不可以超过3个，请重新选择");
            }
            else if(numUp < defaults.numUp){
                fileList = validateUp(fileList);
//                console.log(fileList);
                for(var i = 0;i<fileList.length;i++){
//                    alert(fileList[i].name);
                    var imgUrl = window.URL.createObjectURL(fileList[i]);
                    imgArr.push(imgUrl);
                    var $section = $("<section class='up-section fl heightnone loading' style='width: 100%;'>");
                    imgContainer.prepend($section);
                    var $span = $("<span class='up-span'>");
                    $span.appendTo($section);

                    var $img0 = $("<img class='close-upimg'>").on("click",function(event){
                        event.preventDefault();
                        event.stopPropagation();
                        $(".works-mask").show();
                        delParent = $(this).parent();
                    });
                    $img0.attr("src",baseUrl+"static/wx/img/png/pic37.png").appendTo($section);
                    var $video = $('<video width="100%" controls="false">');
                    var $source = $('<source src=""  type="video/mp4">');
                    $source.attr("src",imgArr[i]);
                    $source.appendTo($video);
                    $video.appendTo($section);
                    var $p = $("<p class='img-name-p'>");
                    $p.html(fileList[i].name).appendTo($section);
                }
            }
            setTimeout(function(){
                $(".up-section").removeClass("loading");
                $(".up-img").removeClass("up-opcity");
            },3000);
            numUp = imgContainer.find(".up-section").length;
            if(numUp >= defaults.numUp){
                $(this).parent().hide();
            }
			var video;//video标签
			var scale = 0.8;//第一帧图片与源视频的比例
			video = $(".video").get(0);//赋值标签
			video.on("loadeddata", function () {//加载完成事件，调用函数
			var canvas = document.createElement("canvas");//canvas画布
			canvas.width = video.videoWidth * scale;
			canvas.height = video.videoHeight * scale;
			canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);//画图
			video.setAttribute("poster", canvas.toDataURL("image/png"));//关键一步 —— 设置标签的 poster 属性的值为 base64 编译过后的canvas绘图。
			})
        });

        $(".z_video").delegate(".close-upimg","click",function(){
            $(".works-mask").show();
            delParent = $(this).parent();
        });
        $(".wsdel-ok").click(function(){
            $(".works-mask").hide();
            var numUp = delParent.siblings().length;
            if(numUp < 6){
                delParent.parent().find(".z_file").show();
            }
            delParent.remove();
        });
        $(".wsdel-no").click(function(){
            $(".works-mask").hide();
        });

        function validateUp(files){
            var arrFiles = [];//替换的文件数组
            for(var i = 0, file; file = files[i]; i++){
                //获取文件上传的后缀名
                var newStr = file.name.split("").reverse().join("");
                if(newStr.split(".")[0] != null){
                    var type = newStr.split(".")[0].split("").reverse().join("");
//                    console.log(type+"===type===");
                    if(jQuery.inArray(type, defaults.fileType) > -1){
                        // 类型符合，可以上传
                        if (file.size >= defaults.fileSize) {
//                            alert(file.size);
                            alert('您这个"'+ file.name +'"文件大小过大');
                        } else {
                            // 在这里需要判断当前所有文件中
                            arrFiles.push(file);
                        }
                    }else{
                        alert('您这个"'+ file.name +'"上传类型不符合');
                    }
                }else{
                    alert('您这个"'+ file.name +'"没有类型, 无法识别');
                }
            }
            return arrFiles;
        }
    });
</script>
</html>